<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html" ; charset="utf-8" />
    <title>教务信息查询</title>
    <link href="../../../css/main.css" rel="stylesheet" type="text/css">
    <link href="../../../bstable/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="../../../bstable/css/bootstrap-table.css" rel="stylesheet" type="text/css">
    <link href="../../../css/new.css" rel="stylesheet" type="text/css">

</head>

<body>
    <div style="padding: 20px">
        <div class="p_line text_ient lx-row ptb10">
            <div class="col lx-col-50">
                <a class="find_a">退款凭证：</a>
                <p class="img-con front-con">
                    <img src="">
                    <b class="del-img">❌</b>
                </p>
                <input id="tuikuan" type="file" class="input-file" accept="image/*" />
            </div>
        </div>
        <div>
            <input type="button" value="上传" class="but_find" id="upload" style="width: 60px;margin: 20px 0 0 97px;"/>
        </div>
    </div>

    <div class="big-img" style="display:none">
        <img src="" alt="">
    </div>

    <script src="../../../js/jquery.js"></script>
    <script src="../../../js/common.js"></script>
    <script src="../../../layer_v2.1/layer/layer.js"></script>
    <script src="../../../js/laydate-master/laydate.js"></script>
    <script src="../../../bstable/js/bootstrap.min.js"></script>
    <script src="../../../bstable/js/bootstrap-table.js"></script>
    <script src="../../../bstable/js/bootstrap-table-zh-CN.min.js"></script>
    <script type="text/javascript">

        function bigShow(src) {
            $('.big-img img').attr('src', src)
            $('.big-img').show()
        }
        $('.big-img').on('click', function() {
            $('.big-img').hide()
        })

        localStorage.setItem('name', '财务管理/缴费信息管理/凭证上传')

        function getQuery(variable) {
            var query = window.location.search.substring(1);
            var vars = query.split("&");
            for (var i = 0; i < vars.length; i++) {
                var pair = vars[i].split("=");
                if (pair[0] == variable) {
                    return pair[1];
                }
            }
            return (false);
        }
        var idNo = getQuery('idNo')
        var trainType = getQuery('trainType');
        // getUserInfo()
        function getUserInfo() {
            $.ajax({
                url: baseUrl + "studentInfo/getStudentInfo",
                method: "get",
                headers: {
                    "Authorization": JSON.parse(localStorage.getItem('userInfo')).token
                },
                data: {
                    trainType,
                    idNo,
                },
                success: function(data) {
                    var cards = data.studentCards
                    var maps = ['tuikuan']
                    cards.forEach(function(item) {
                        if (maps.includes(item.property)) {
                            $('#' + item.property).hide()
                            $('#' + item.property).siblings('p').css('display', 'inline-block').find('img').attr('src',
                                baseUrl + 'studentInfo/picDownload?url=' + encodeURIComponent(item.fileResource))
                        }
                    })
                }
            })
        }
   
        $('.input-file').on('change', function() {
            var files = this.files
            var id = $(this).attr('id')
            if (files.length) {
                $(this).hide()
                $(this).siblings('.img-con').css('display', 'inline-block')
                drawImg($(this).siblings('.img-con').find('img'), files[0])
            }
        })
        $('.del-img').on('click', function() {
            $(this).siblings('img').attr('src', '')
            $(this).parents('.img-con').hide().siblings('.input-file').show()
            $(this).parents('.img-con').siblings('.input-file')[0].value = ''
        })
        function drawImg($el, file) {
            var URL = window.URL || window.webkitURL;
            var imgUrl = URL.createObjectURL(file);
            $el.attr('src', imgUrl)
        }

        var studentId = getQuery('id')
        var userId = JSON.parse(localStorage.getItem('userInfo')).userId
        $('#upload').on('click', function() {
            var files = []
            $('.input-file').each(function (index) {
                if (this.files.length) {
                    files.push({
                        file: this.files[0],
                        key:$(this).attr('id')
                    })
                }
            })
            
            var flag = false
            $('.img-con img').each(function(item) {
                if($(this).attr('src')) {
                    flag = true
                }
            })

            if(!files.length && !flag) {
                alert('请至少选择一种凭证')
                return
            }
            // 更新
            if(!files.length && flag) {
                return postAjax()
            }
            var i = 0 
            // files.forEach(function(file) {
                var formData = new FormData()
                formData.append('trainType', trainType);
                files.forEach(function (item, index) {
                    formData.append('propertys', item.key);
                    formData.append('files', item.file);
                    formData.append('studentId', studentId);
                    formData.append('studyId', getQuery('studyId'));
                    formData.append('userId', userId);
                })
                $.ajax({
                    url: baseUrl + "studentInfo/uploadStuCertificate",
                    method: "post",
                    data: formData,
                    headers: {
                        "Authorization": JSON.parse(localStorage.getItem('userInfo')).token
                    },
                    processData: false,
                    contentType: false,
                    mimeType: "multipart/form-data",
                    success: function (data) {
                        postAjax()
                    }
                })
            // })
        })
        
        function postAjax() {
            $.ajax({
                url: baseUrl + "studentInfo/addPz",
                method: "post",
                data: {
                    studentId: studentId,
                    userId: userId,
                    commitFlag: 8,
                    feeId: getQuery('feeId'),
                    studyId: getQuery('studyId')
                },
                headers: {
                    "Authorization": JSON.parse(localStorage.getItem('userInfo')).token
                },
                success: function (data) {
                    alert('上传成功')
                    location.href = './moneySearch.html'
                }
            })
        }


        $('.img-con img').on('click', function() {
            var src = $(this).attr('src')
            if(src.endsWith('pdf')) {
                src = encodeURIComponent(location.origin + src)
                window.open('../../pdf/web/viewer.html?file=' + src);
            }else {
                bigShow(src)
            }
        })
       
    </script>
</body>

</html>
<!-- 
layer.photos({
    photos: json //格式见API文档手册页
    ,anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机
  }); -->